Step 1 of 3: Setting Up the Application

In this step, you will create a new Visual Studio application, add the appropriate references for the project, and add XAML markup to create the C1Barcode control.

Create a new Windows Store application:
1. Select File | New | Project. The New Project dialog box will open.
2. Select Store Apps in the Templates list under Visual C#. From the templates list, select Blank App (Universal Apps).
3. Give your application a Name and select OK. Your new application will open.
Right-click the References folder in the Solution Explorer and select Add | New Reference. Locate and add the following references:
- C1.Xaml.dll
- C1.Xaml.BarCode.dll
Right-click the Resources folder and select Add | Existing Item. The Add Existing Item dialog box will open.
1. Locate an image file you would like to add to your application.
2. Select the file and click OK. The file will be added to the Resources folder.
3. Rebuild the application so that your file is available to your application.
Open the MainPage.xaml file and locate the opening <Page> tag. This tag will include the necessary namespaces. Edit the tag so that it resembles the following markup:

XAML	Copy Code
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:V12015BarcodeTest2" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="using:C1.Xaml.BarCode" xmlns:Xaml="using:C1.Xaml" xmlns:BarCode="using:C1.BarCode" x:Class="V12015BarcodeTest2.MainPage" mc:Ignorable="d">

XAML

Copy Code

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:V12015BarcodeTest2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml.BarCode" xmlns:Xaml="using:C1.Xaml"
    xmlns:BarCode="using:C1.BarCode"
    x:Class="V12015BarcodeTest2.MainPage"
    mc:Ignorable="d">

The following namespaces are added to the tag:

xmlns:c1="using:C1.Xaml.BarCode"
xmlns:Xaml="using:C1.Xaml"
xmlns:BarCode="using:C1.BarCode"

Place your cursor between the <Grid></Grid> tags on the page. Add the following XAML markup between the <Grid></Grid> tags to set up the Grid's resources and row definitions:

XAML	Copy Code
<Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="FontSize" Value="26.667"></Setter> </Style> <Style TargetType="TextBox"> <Setter Property="FontSize" Value="26.667"></Setter> </Style> <Style TargetType="ComboBox"> <Setter Property="FontSize" Value="26.667"></Setter> </Style> </Grid.Resources> <Border HorizontalAlignment="Center"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="20"/> <RowDefinition Height="20" /> <RowDefinition Height="60" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="20" /> <ColumnDefinition Width="80*" /> </Grid.ColumnDefinitions>

XAML

Copy Code

<Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="26.667"></Setter>
            </Style>
            <Style TargetType="TextBox">
                <Setter Property="FontSize" Value="26.667"></Setter>
            </Style>
            <Style TargetType="ComboBox">
                <Setter Property="FontSize" Value="26.667"></Setter>
            </Style>
        </Grid.Resources>
        <Border HorizontalAlignment="Center">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20*"/>
                    <RowDefinition Height="20*" />
                    <RowDefinition Height="60*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20*" />
                    <ColumnDefinition Width="80*" />
                </Grid.ColumnDefinitions>

The following markup adds four TextBlock controls and one ComboBox control. When you run your application, you will be able to change the type of BarCode control being displayed:

XAML	Copy Code
<TextBlock Text="CodeType:" VerticalAlignment="Center"></TextBlock> <ComboBox x:Name="cbCodeType" HorizontalAlignment="Left" Grid.Column="1" Width="414" Height="50" SelectionChanged="cbCodeType_SelectionChanged" /> <TextBlock Text="Text:" Grid.Row="1" VerticalAlignment="Center"></TextBlock> <TextBox x:Name="text" Text="{Binding Text, ElementName=barcode, UpdateSourceTrigger=PropertyChanged, FallbackValue='', Mode=TwoWay}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" Height="50" Width="414" TextChanged="text_TextChanged"/> <TextBlock Text="BarCode:" Grid.Row="2" VerticalAlignment="Center"/> <Grid Grid.Row="2" Grid.Column="1" Background="White" HorizontalAlignment="Left" Width="414">

XAML

Copy Code

<TextBlock Text="CodeType:" VerticalAlignment="Center"></TextBlock>
                <ComboBox x:Name="cbCodeType"  HorizontalAlignment="Left" Grid.Column="1"
                          Width="414"
                          Height="50"
                          SelectionChanged="cbCodeType_SelectionChanged" />
                <TextBlock Text="Text:" Grid.Row="1" VerticalAlignment="Center"></TextBlock>
                <TextBox x:Name="text" Text="{Binding Text, ElementName=barcode, UpdateSourceTrigger=PropertyChanged, FallbackValue='', Mode=TwoWay}"
                         HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" Height="50" Width="414" TextChanged="text_TextChanged"/>
                <TextBlock Text="BarCode:" Grid.Row="2" VerticalAlignment="Center"/>
                <Grid Grid.Row="2" Grid.Column="1" Background="White" HorizontalAlignment="Left" Width="414">

Add the markup for the C1BarCode control below the last Grid tag. This markup will set up the type of BarCode the application will display when you run it:

XAML	Copy Code
<c1:C1BarCode x:Name="barcode" AutoSize="False" BarHeight="0" CodeType="QRCode" CaptionPosition="Below" Text="http://www.componentone.com" Height="200" Width="200"> <c1:C1BarCode.QRCodeOptions> <BarCode:QRCodeOptions ErrorLevel="H" /> </c1:C1BarCode.QRCodeOptions> <c1:C1BarCode.ModuleSize> <BarCode:ModuleSize BarNarrow="0" BarWide="0" /> </c1:C1BarCode.ModuleSize> </c1:C1BarCode>

XAML

Copy Code

<c1:C1BarCode x:Name="barcode" AutoSize="False" BarHeight="0" CodeType="QRCode" CaptionPosition="Below" Text="http://www.componentone.com" Height="200" Width="200">
      <c1:C1BarCode.QRCodeOptions>
          <BarCode:QRCodeOptions ErrorLevel="H" />
      </c1:C1BarCode.QRCodeOptions>
      <c1:C1BarCode.ModuleSize>
          <BarCode:ModuleSize BarNarrow="0" BarWide="0" />
      </c1:C1BarCode.ModuleSize>                       
</c1:C1BarCode>

The last section of XAML needed adds the image file you added in step 3:

XAML	Copy Code
<Image Source="ms-appx:/V12015BarcodeTest2.Windows/Resources/c1logo.png" x:Name="image" Width="70" Height="70" />

You have completed Step 1 of this Quick Start. In this step, you created a new application, added references, and used XAML markup to set up your application. In the next step, you will add code to your application.